iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
0
Modern Web

勇者Jason和前端之鑰系列 第 4

【DAY4】者工具 DevTools,前端不可或缺的小夥伴!

  • 分享至 

  • xImage
  •  

DevTools,前端不可或缺的小夥伴!)


開發人員工具DevTools,前端不可或缺的小夥伴!

昨天帶大家做了一遍emmet,
今天我們要來學習使用開發人員工具,
我自己是用mac配上google chrome的開發人員工具。
這篇教學不會附圖,
因為昨天截了一堆圖,然後用PS框出位置,花了不少時間,結果居然不能上傳。

首先,打開你的safari,
看看上方有沒有「開發」可以選,
如果沒有請到「Safari」->「偏好設定」->「進階->將「在選單列中顯示「開發」選單」勾選
此時就可以用command+alt+i打開safari開發人員工具了,
但是我在摸索safari的開發人員工具都找不到地方是顯示CSS的地方,
因此轉戰google chrome的開發人員工具。

google chrome的開發人員工具一樣是用command+alt+i打開,
此時會在右邊出現上下兩欄,上面那欄顯示elements,顯示網頁的html,
此時可以嘗試點其中一行,
可以發現在網頁上會表示出該段是在描述網頁的相對位置。
如果沒有標示出可能是因為該段不在螢幕裡面。

但是我們在瀏覽其他人的網頁,總會想看別人是怎麼寫的。
其實只要在想看的地方按右鍵,然後選擇檢查,elements就會顯示該段html了。

而下方的style則是之後寫CSS會顯示選取區塊有使用的CSS,
也可以在此改變數值,可以直接看到網頁變化。
此時再回去VS Code上更改數值,會方便許多。

此時再把目光回到elements,右邊有一個行動裝置的圖案,
這是可以讓開發人員來檢視不同解析度下,網頁呈現的效果。
因為近年行動裝置大行其道,不同大小的手機百花爭鳴。
所以在設計網頁,把手機小螢幕為優先考量,再拓展到大螢幕,
是一種比較好的方法。

接著,在elements標籤,旁邊有一個console,
可以檢查網頁上的問題,
有一次經驗是再本地端看,網頁都完美呈現,
可是上傳到github page(一個可以免費存放自己寫的網頁的地方)
有一些檔名加了下底線的CSS檔就無法讀取到了,
出問題的時候可以到這邊看看。


上一篇
【DAY3】好Emmet,不用嗎?
下一篇
【Day5】用CSS為網頁穿上新衣!
系列文
勇者Jason和前端之鑰32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言